<template>
  <div class="main">
    <div style="
        width: 100%;
        height: 40px;
        background-color: #fff;
        margin-bottom: 20px;
        padding: 10px;
      ">
      当前模块:<span style="font-weight: bold">在校寄宿生名单成长记录汇总表信息查询模块</span>
    </div>
    <div class="main-body">
      <div class="main-header float-left">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
          <el-form-item label="学校：">
            <el-select v-model="formInline.xq" placeholder="请选择学校" @change="getOnGuardFacultyway">
              <el-option v-for="item in xq_list" :key="item.xqDm" :label="item.xqJc" :value="item.xqDm">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级：">
            <el-select v-model="formInline.nj" placeholder="请选择年级" @change="getOnGuardFacultyway">
              <el-option v-for="(item, index) in nj_list" :key="index" :label="item.njJc" :value="item.njDm">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级：">
            <el-select v-model="formInline.bj" placeholder="请选择班级" @change="getOnGuardFacultyway">
              <el-option v-for="(item, index) in bj_list" :key="index" :label="item.bjJc" :value="item.bjDm">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生姓名：">
            <el-input v-model="formInline.xm" placeholder="请输入学生姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
            <!-- <el-button type="primary" icon="el-icon-download">下载本区教职工表</el-button> -->
          </el-form-item>
        </el-form>
        <!-- </div> -->
      </div>

      <el-dialog title="寄宿学生成长档案记录汇总表显示与打印窗口" :visible.sync="dialogDetails" width="1000px" :before-close="handleClose">
        <div style="height: 800px; overflow: auto">
          <div style="
              text-align: center;
              width: 100%;
              height: 40px;
              background-color: antiquewhite;
              line-height: 40px;
            ">
            此页面内容可以直接打印，请按右面的图标打印本页内容
            <el-button type="primary" icon="el-icon-printer" style="float: right" v-print="printOption">打印</el-button>
          </div>
          <div style="padding: 16px" class="font-all" id="nbprint">
            <div style="
                height: 40px;
                color: #1c511c;
                font-size: 22px;
                display: flex;
                justify-content: center;
                align-items: center;
              ">
              寄宿学生成长档案记录汇总表
            </div>

            <el-descriptions class="margin-top" :column="3" size="small" border>
              <el-descriptions-item label="学校">{{ zdJlEdit.XQJC }}</el-descriptions-item>
              <el-descriptions-item label="班级">{{ zdJlEdit.njmc + "(" + zdJlEdit.bj + "班)" }}</el-descriptions-item>
              <el-descriptions-item label="学生姓名">{{ zdJlEdit.XM }}</el-descriptions-item>

              <el-descriptions-item label="监护人姓名">{{ tStuJtcies.name }}</el-descriptions-item>
              <el-descriptions-item label="电话">{{ tStuJtcies.lxfs }}</el-descriptions-item>
              <el-descriptions-item label="与孩子关系">{{ tStuJtcies.cw }}</el-descriptions-item>
              <el-descriptions-item label="寄宿学生基本情况" :span="3">{{ jssStuJbqks.jyqk }}</el-descriptions-item>
              <el-descriptions-item label="家庭教育基本情况" :span="3">{{ jssStuJbqks.jtjyqk }}</el-descriptions-item>
            </el-descriptions>

            <div style="text-align: center; padding: 8px; font-size: 16px" v-if="jssCzCountEdit">
              学校采取的教育与指导措施
            </div>

            <table border="0" cellspacing="0" cellpadding="0" style="
                border-collapse: collapse;
                border-style: none;
                font-size: 13px;
                width: 100%;
              " v-for="i in jssCzCountEdit">
              <tr>
                <td style="
                    border: 1px solid #ebeef5;
                    text-align: center;
                    width: 40px;
                  " rowspan="4">
                  {{ i.BJLB }} <br />
                  (谈话交流)
                </td>
                <td style="
                    border: 1px solid #ebeef5;
                    height: 33px;
                    text-align: center;
                    width: 60px;
                  ">
                  日期与时间
                </td>
                <td style="
                    border: 1px solid #ebeef5;
                    text-align: center;
                    width: 200px;
                  ">
                  <span> {{ i.GaDate + "(" + i.DAY + ")" }}</span>
                </td>
              </tr>
              <tr>
                <td style="
                    border: 1px solid #ebeef5;
                    height: 33px;
                    text-align: center;
                    width: 60px;
                  ">
                  指（辅）导人员
                </td>
                <td style="border: 1px solid #ebeef5; text-align: center">
                  <span>{{ i.BJRY }}</span>
                </td>
              </tr>
              <tr>
                <td style="
                    border: 1px solid #ebeef5;
                    height: 33px;
                    text-align: center;
                    width: 60px;
                  ">
                  指（辅）导主要内容
                </td>
                <td style="border: 1px solid #ebeef5; text-align: center">
                  <span v-html="i.ZYNR"></span>
                </td>
              </tr>
              <tr>
                <td style="
                    border: 1px solid #ebeef5;
                    height: 33px;
                    text-align: center;
                    width: 60px;
                  ">
                  以后注意事项与建议
                </td>
                <td style="border: 1px solid #ebeef5; text-align: center">
                  <span v-html="i.ZYSXJY"></span>
                </td>
              </tr>
            </table>
          </div>

          <table border="0" cellspacing="0" cellpadding="0" style="
              border-collapse: collapse;
              border-style: none;
              font-size: 15px;
              width: 100%;
            ">
            <tr>
              <td style="
                  text-align: right;
                  font-size: 13px;
                  height: 50px;
                  line-height: 50px;
                  padding-right: 10px;
                ">
                查询日期:{{ getNowTimeDate() }}
              </td>
            </tr>
          </table>
        </div>

        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogDetails = false">取 消</el-button>
          <el-button type="primary" @click="dialogDetails = false">确 定</el-button>
        </span> -->
      </el-dialog>

      <div class="main-center float-left">
        <el-table :data="tableData" height="650" style="width: 100%; margin-top: 6px" :header-cell-style="{
          background: '#fafafa',
          color: '#000000e0',
          fontWeight: 600,
        }">
          <!-- <el-table-column type="index" label="序号" width="100"></el-table-column> -->
          <el-table-column prop="xqjc" label="就读学校"></el-table-column>
          <el-table-column prop="xm" label="姓名"></el-table-column>
          <el-table-column prop="njmc" label="年级"></el-table-column>
          <el-table-column prop="bj" label="班级"></el-table-column>
          <el-table-column prop="jhrMc" label="监护人类别	"></el-table-column>
          <el-table-column prop="jkztMc" label="健康状况"></el-table-column>
          <el-table-column prop="yxqjc" label="学生来源" width="100"></el-table-column>
          <el-table-column label="详情" width="100">
            <template slot-scope="scope" style="z-index: -9999">
              <el-button @click="handleClick(scope.row)" type="text" size="small"
                style="color: #ff4d4f">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="footer-pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formInline.currentPage" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
            :page-size="formInline.limit" layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import httplogin from "../../api/login";
export default {
  name: "Social",
  data() {
    return {
      printOption: {
        id: "nbprint", // 打印元素的id 不需要携带#号
        popTitle: "教职工基本信息登记表", // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
      },
      tableData: [],
      formInline: {
        xq: "",
        nj: "",
        xm: "",
        currentPage: 1,
        limit: 10,
        total: 0,
      },
      xq_list: [], //校区类别 options
      ddl_bb_list: [], //办别 options
      bj_list: [], //班级 options
      nj_list: [], //年级 options
      dialogDetails: false,
      JiaoZhiGongInfo: {},
      schoolList: [],
      tableDataArr: {},
      jssStuJbqks: [{}],
      tStuJtcies: [{}],
      zdJlEdit: [{}],
      jssCzCountEdit: [{}],
    };
  },
  mounted() {
    this.getOnGuardFacultyway();
    this.getschoolList();
  },
  methods: {
    async getOnGuardFacultyway() {
      let data = {
        current: this.formInline.currentPage,
        size: this.formInline.limit,
        xq: this.formInline.xq,
        nj: this.formInline.nj,
        xm: this.formInline.xm,
        bj: this.formInline.bj,
      };
      let res = await httplogin.getJssCzCount(data);
      if (res.data.code == 200) {
        this.tableData = res.data.data.data.data;
        this.formInline.total = res.data.data.data.count;
        this.xq_list = res.data.data.data.xq;
        this.nj_list = res.data.data.data.nj;
        this.bj_list = res.data.data.data.bj;
      }
    },
    async getschoolList() {
      let res = await httplogin.getUserPermissionInfo();
      if (res.data.code == 200) {
        if (res.data.data.estate == "区级") {
          this.schoolList = res.data.data.UserPermission;
          this.sortPingyinfun(this.schoolList);
        }
      }
    },

    getNowTimeDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = ("0" + (now.getMonth() + 1)).slice(-2);
      const day = ("0" + now.getDate()).slice(-2);
      // const hours = ('0' + now.getHours()).slice(-2);
      // const minutes = ('0' + now.getMinutes()).slice(-2);
      // const seconds = ('0' + now.getSeconds()).slice(-2);
      const formattedTime = year + "年" + month + "月" + day + "日";
      return formattedTime;
    },
    sortPingyinfun(list) {
      list.sort((a, b) => a.XQJC.localeCompare(b.XQJC));
      return list;
    },
    //点击查看详情 open 弹框
    handleClick(row) {
      // console.log(row);
      this.getOnGuardFacultyInfoway(row);
      this.dialogDetails = true;
    },
    async getOnGuardFacultyInfoway(val) {
      var obj = {
        // stuId: '00133052'
        // stuId: "00116953",
        stuId: val.stuId,
      };
      var res = await httplogin.getJssCzCountEdit(obj);
      const { zdJlEdit, jssStuJbqks, tStuJtcies, jssCzCountEdit } = res.data.data.data;
      // console.log(res.data.data.data);
      if (res.data.code == 200) {
        // this.JiaoZhiGongInfo = res.data.data.jzgInfo
        this.zdJlEdit = zdJlEdit[0] || {};
        this.tStuJtcies = tStuJtcies[0] || {};
        this.jssStuJbqks = jssStuJbqks[0] || {};
        this.jssCzCountEdit = jssCzCountEdit || {};
      }
    },
    //close 弹框
    handleClose() {
      this.dialogDetails = false;
    },
    onSubmit() {
      this.getOnGuardFacultyway();
      // console.log(this.formInline);
    },
    handleSizeChange(val) {
      this.formInline.limit = val;
      this.getOnGuardFacultyway();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.formInline.currentPage = val;
      this.getOnGuardFacultyway();
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  float: left;
  height: auto;
  box-sizing: border-box;
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;
  overflow-x: auto;
  overflow-y: auto;
}

.main-body {
  width: 100%;
  height: auto;
  float: left;
  background-color: #fff;
  box-sizing: border-box;
  padding: 18px;
  border-radius: 12px;
}

.float-left {
  width: 100%;
  height: auto;
  float: left;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.d-flex {
  display: flex;
  align-items: center;
}

.mr-24 {
  margin-right: 24px;
}

.fontcolor {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  box-sizing: border-box;
}

.footer-pagination {
  padding: 10px 0 0 0;
  text-align: right;
}

.font-all {
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  scrollbar-color: rgba(0, 0, 0, 0.25) rgba(5, 5, 5, 0.06);
}
</style>

<style scoped>
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
  padding: 8px !important;
}

::v-deep .el-dialog__header {
  background-color: #ff4d4f !important;
}

::v-deep .el-dialog__title {
  line-height: 24px;
  font-size: 20px;
  color: #fff !important;
  /* font-weight: 600; */
}
</style>